<template>
  <div class="main">
    <div class="box">
      <br/>
      <el-descriptions border>
        <el-descriptions-item label="订单号" label-class-name="my-label" content-class-name="my-content">
          {{ planeData.orderNo }}
        </el-descriptions-item>

        <el-descriptions-item label="用户名" label-class-name="my-label" content-class-name="my-content">{{
            planeData.name
          }}
        </el-descriptions-item>


        <el-descriptions-item label="手机号" label-class-name="my-label" content-class-name="my-content">{{
            planeData.phone
          }}
        </el-descriptions-item>


        <el-descriptions-item label="航班号" label-class-name="my-label" content-class-name="my-content">
          {{ planeData.planeId }}
        </el-descriptions-item>


        <el-descriptions-item label="出发机场" label-class-name="my-label" content-class-name="my-content">
          {{ planeData.startAirport }}
        </el-descriptions-item>


        <el-descriptions-item label="抵达机场" label-class-name="my-label" content-class-name="my-content">
          {{ planeData.endAirport }}
        </el-descriptions-item>


        <el-descriptions-item label="出发日期" label-class-name="my-label" content-class-name="my-content">
          {{ planeData.startDateTime }}
        </el-descriptions-item>


        <el-descriptions-item label="到达日期" label-class-name="my-label" content-class-name="my-content">
          {{ planeData.endDateTime }}
        </el-descriptions-item>

        <el-descriptions-item label="票价" label-class-name="my-label" content-class-name="my-content">
          <el-tag size="medium">{{ planeData.totalFee }}元</el-tag>
        </el-descriptions-item>

        <el-descriptions-item label="起飞时间" label-class-name="my-label" content-class-name="my-content">
          {{ planeData.flightStartTime }}
        </el-descriptions-item>


        <el-descriptions-item label="抵达时间" label-class-name="my-label" content-class-name="my-content">
          {{ planeData.flightEndTime }}
        </el-descriptions-item>


        <el-descriptions-item label="备注" label-class-name="my-label" content-class-name="my-content">无
        </el-descriptions-item>
      </el-descriptions>



      <div class="message">
        <h1>乘客信息</h1>
        <el-form  :model="data" ref="data">
          <div class="form">
            <div v-for="(item,index) in data.form"
                 :key="item.key">
              <div>
                <!--        <div class="b">-->
                <el-form-item
                  label="乘机人姓名:"
                  class="item"
                  :prop="'form.'+index+'.name'">
                  <el-input v-model="item.name" style="width:250px" placeholder="乘机人姓名"></el-input>
                </el-form-item>
                <!--        </div>-->
                <el-form-item
                  label="乘机人证件号:"
                  class="item"
                  :prop="'form.'+index+'.idCard'">
                  <el-input v-model="item.idCard" style="width:235px" placeholder="仅限中华人民共和国居民身份证"></el-input>
                </el-form-item>

                <el-form-item
                  label="乘机人联系号码:"
                  class="item"
                  :prop="'form.'+index+'.phone'">
                  <el-input v-model="item.phone" style="width:220px" placeholder="移动手机号" ></el-input>
                </el-form-item>
              </div>
              <i
              v-if="data.form.length>1"
              class="el-icon-delete"
              @click="del(item)">
              </i>
            </div>
          </div>

          <el-form-item class="button">
            <span v-if="this.click===0" class="tip">您好！请先填写乘坐人信息 &nbsp;</span>
            <el-button type="primary" @click="add()">再加一位</el-button>
            <el-button type="primary" @click="onSubmit()">保存信息</el-button>
          </el-form-item>
        </el-form>
      </div>




    </div>
  </div>

</template>
<script>
import order from "../../api/order"

export default {
  name: "message",
  props: {
    planeData: {
      type: Object
    }
  },
  data() {
    return {
      click: 0,
      formLength:0,
      data: {
        form: [{
          name: '',
          idCard: '',
          phone: ''
        }]
      }
    }
  },
  methods: {
    add() {
      if(this.data.form.length<=2){
        this.formLength = this.data.form.length+1;
        this.data.form.push({
          name: '',
          idCard: '',
          phone: ''
        })
      }
      else {
        this.$message.warning("最多3位！~");
      }

    },
    del(item){
      const index =this.data.form.indexOf(item);
      if (index !==-1){
        this.formLength =this.data.form.length-1;
        this.data.form.splice(index,1)
      }
    },
    onSubmit() {


      order.getInformation(this.$route.params.orderNo, this.data.form)
        .then(response => {
          this.click++
          this.$message({
            message: '保存成功',
            type: 'success'
          });

        })
    }
    ,
  }
}
</script>

<style scoped>

.main {
  width: 100%;
  height: 100%;
}

.message {
  display: flex;
  flex-direction: column;
}

.form {
  display: flex;
  justify-content: space-around;
}

.item {
  display: flex;
  flex-direction: row;

}

.button {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  margin-right: 50px;
}

.tip {
  color: #ff0000;
  font-weight: bolder;
  font-size: large;
}

</style>

<!--全局css-->
<style>

.my-label {
  background: #000000;
}

.my-content {
  background: #d5eae2;
  text-align: center;

}

</style>
